<template>

	<div style="text-align: center;">
		<div style="margin-top: 2vh;font-size: 3vh;">注册</div>
		<div style="text-align: center;margin-top: 20vh;">
			<img src="@/assets/logo.png" style="width: 10vh;height: 10vh;">
		</div>
		<CheckCodeForm ref="checkCodeForm"></CheckCodeForm>
		<div class="next"  @click="sendRegisterReq">
			<el-icon>
				<Right />
			</el-icon>
		</div>
	</div>
</template>

<script>
	import CheckCodeForm from '@/components/units/CheckCodeForm.vue'
	import url from '@/assets/url.json';
	import {
		showNotify
	} from 'vant';
	
	export default {
		props:{
			close:Function
		},
		components: {
			CheckCodeForm
		},
		methods:{
			sendRegisterReq(){
				let reg_num = /^[1][3,4,5,7,8][0-9]{9}$/;
				
				let formData = this.$refs.checkCodeForm.getData();
				if(!reg_num.test(formData.phonenumber)){
					showNotify({ type: 'danger', message: '手机号格式有误!' });
					return;
				}
				
				this.$axios({
					url:url.ip+"/api-user/user/register",
					method:'POST',
					data:{
						phoneNumber:formData.phonenumber,
						checkCode:formData.checkcode,
						gender: '未知'
					}
				}).then((res)=>{
					console.log(res);
					if(res.data.code===0){
						showNotify({ type: 'success', message: "注册成功" });
						this.close();
						return;
					}else{
						showNotify({ type: 'danger', message: res.data.message });
					}
				}).catch((err)=>{
					console.log(err);
					showNotify({ type: 'danger', message: err });
				})
			}
		}

	}
</script>

<style>
	.next {
		position: absolute;
		bottom: 8vh;
		left: 40%;
		width: 10vh;
		height: 10vh;
		margin: 0 auto;
		background-color: #67C23A;
		border-radius: 100%;
		text-align: center;
		line-height: 12vh;
		font-weight: 700;
		font-size: 5vh;
		color: white;
	}
</style>